<template>
  <div class="app-container">
    <div class="container-module">
      <div class="search-module">
        <el-form
          :inline="true"
          class="search-form"
          label-width="60px"
          size="small"
          ref="searchForm"
          :model="searchForm"
        >
          <div class="flex-between">
            <div>
              <el-form-item
                label="商户名称"
                class="search-form-item"
                prop="mer_name"
              >
                <el-input
                  clearable
                  placeholder="请输入商户名称"
                  v-model="searchForm.mer_name"
                >
                </el-input>
              </el-form-item>
              <el-form-item
                label="采购商品"
                class="search-form-item"
                prop="product_name"
              >
                <el-input
                  clearable
                  placeholder="请输入采购商品名称"
                  v-model="searchForm.product_name"
                >
                </el-input>
              </el-form-item>
            </div>
            <div class="button-box">
              <el-button
                @click="getListWay"
                type="primary"
                icon="el-icon-search"
                class="inquire-box marginBottom-10"
                >查询</el-button
              >
              <el-button
                icon="el-icon-refresh-left"
                class="reset-box"
                @click="resetForm('searchForm')"
                >重置</el-button
              >
              <el-button
                type="plain"
                :icon="
                  ifshowsearch ? ' el-icon-caret-top' : 'el-icon-caret-bottom'
                "
                class="reset-box"
                @click="ifshowsearch = !ifshowsearch"
                >展开</el-button
              >
            </div>
          </div>
          <div v-if="ifshowsearch">
            <el-form-item label="商户id" class="search-form-item" prop="mer_id">
              <el-input
                clearable
                placeholder="请输入商户id"
                v-model="searchForm.mer_id"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              label="订单编号"
              class="search-form-item"
              prop="mer_order_no"
            >
              <el-input
                clearable
                placeholder="请输入订单编号"
                v-model="searchForm.mer_order_no"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              label="售后单号"
              class="search-form-item"
              prop="refund_order_no"
            >
              <el-input
                clearable
                placeholder="请输入售后单号"
                v-model="searchForm.refund_order_no"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              label="售后状态"
              class="search-form-item"
              prop="status"
            >
              <el-select
                clearable
                v-model="searchForm.status"
                placeholder="请选择售后状态"
              >
                <el-option
                  v-for="item in status"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="退款申请时间"
              label-width="84px"
              class="search-form-item"
              prop="time"
            >
              <el-date-picker
                @change="timeChange"
                clearable
                v-model="searchForm.time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <el-divider></el-divider>
      <div class="table-module">
        <div class="table-top flex-end">
          <div class="flex button-box">
            <el-button
              class="reset-box marginRight-10"
              icon="el-icon-download"
              style="height: 30px"
              >批量导出</el-button
            >
            <el-dropdown trigger="click" :hide-on-click="false">
              <span class="el-dropdown-link">
                <el-button
                  icon="el-icon-s-operation"
                  style="height: 30px"
                ></el-button>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
                  <el-checkbox v-model="checkboxTableThead" :label="fruit">{{
                    tableTheadOptions[fruit].label
                  }}</el-checkbox>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
        <el-row>
          <el-col>
            <el-table
              v-loading="loading"
              highlight-current-row
              :data="dataList"
              :header-cell-style="{
                'background-color': '#f3f8fe',
                color: '#606266',
                height: '50px',
              }"
              style="width: 100%"
            >
              <el-table-column
                v-for="fruit in tableThead"
                :key="fruit"
                :label="tableTheadOptions[fruit].label"
                align="center"
              >
                <template slot-scope="scope">
                  <div v-if="fruit == 'sku_img'">
                    <el-image
                      :preview-src-list="[scope.row[fruit]]"
                      :src="scope.row[fruit]"
                      style="width: 50px; height: 50px; border-radius: 4px"
                    ></el-image>
                  </div>
                  <div v-else-if="fruit == 'type'">
                    <el-tag size="mini" v-if="scope.row[fruit] == 1"
                      >仅退款</el-tag
                    >
                    <el-tag size="mini" v-if="scope.row[fruit] == 2"
                      >退货退款</el-tag
                    >
                    <el-tag size="mini" v-if="scope.row[fruit] == 3"
                      >换货</el-tag
                    >
                  </div>
                  <div v-else-if="fruit == 'status'">
                    <el-tag size="mini" v-if="scope.row[fruit] == 1"
                      >待审核</el-tag
                    >
                    <el-tag
                      size="mini"
                      type="success"
                      v-if="scope.row[fruit] == 8"
                      >售后完成</el-tag
                    >
                    <el-tag
                      size="mini"
                      type="success"
                      v-if="scope.row[fruit] == 2"
                      >审核通过</el-tag
                    >
                    <el-tag
                      size="mini"
                      type="danger"
                      v-if="scope.row[fruit] == 9"
                      >已驳回</el-tag
                    >
                    <el-tag
                      size="mini"
                      type="danger"
                      v-if="scope.row[fruit] == 10"
                      >取消申请</el-tag
                    >
                  </div>
                  <div v-else>
                    {{ scope.row[fruit] }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                align="center"
                width="200px"
              >
                <template slot-scope="scope">
                  <el-button
                    v-if="scope.row.status == 1"
                    @click="check(2, scope.row.id)"
                    style="margin: 5px"
                    type="success"
                    size="mini"
                  >
                    同意
                  </el-button>
                  <el-button
                    v-if="scope.row.status == 1"
                    @click="check(1, scope.row.id)"
                    style="margin: 5px"
                    type="danger"
                    size="mini"
                  >
                    驳回
                  </el-button>
                  <el-button
                    style="margin: 5px"
                    type="primary"
                    size="mini"
                    @click="viewDetail(scope.row)"
                  >
                    详情
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col style="text-align: right">
            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="searchForm.page"
              :limit.sync="searchForm.count"
              @pagination="getListWay"
            />
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 详情抽屉 -->
    <detail
      ref="detail"
      :ids="id"
      v-if="ifShowDetail"
      :detailTitle="detailTitle"
    />
  </div>
</template>
<script>
import {
  getRefundOrderList,
  getRefundOrderDetail,
  auditingRefundOrderAudit,
} from "@/api/order/index";
import detail from "./detail";
// import detail from "./detailcopy";
const tableTheadOption = {
  id: {
    label: "售后id",
    field: "id",
  },
  mer_id: {
    label: "商户ID",
    field: "mer_id",
  },
  mer_name: {
    label: "商户名称",
    field: "mer_name",
  },
  mer_order_no: {
    label: "原订单号",
    field: "mer_order_no",
  },
  refund_order_no: {
    label: "售后单号",
    field: "refund_order_no",
  },
  product_name: {
    label: "商品名称",
    field: "product_name",
  },
  sku_img: {
    label: "规格图片",
    field: "sku_img",
  },
  sku_name: {
    label: "规格名称",
    field: "sku_name",
  },
  coupon_unit: {
    label: "采购单价",
    field: "coupon_unit",
  },
  refund_number: {
    label: "退款数量",
    field: "refund_number",
  },
  coupon_total: {
    label: "退款总提货券",
    field: "coupon_total",
  },
  type: {
    label: "类别",
    field: "type",
  },
  status: {
    label: "退款状态",
    field: "status",
  },
};
const allTableThead = [
  "id",
  "mer_id",
  "mer_name",
  "mer_order_no",
  "refund_order_no",
  "product_name",
  "sku_img",
  "sku_name",
  "coupon_unit",
  "refund_number",
  "coupon_total",
  "type",
  "status",
];
const defaultTableThead = [
  "mer_name",
  "mer_order_no",
  "refund_order_no",
  "product_name",
  "sku_img",
  "sku_name",
  "coupon_unit",
  "refund_number",
  "coupon_total",
  "type",
  "status",
];
export default {
  watch: {
    checkboxTableThead(valArr) {
      this.tableThead = this.allTableThead.filter(
        (i) => valArr.indexOf(i) >= 0
      );
      this.tableKey = this.tableKey + 1;
    },
  },
  components: {
    detail,
  },
  data() {
    return {
      id: "",
      detailTitle: "", //抽屉标题
      // 动态显示表头默认表头
      tableTheadOptions: tableTheadOption,
      allTableThead: allTableThead,
      tableThead: defaultTableThead, // 默认表头
      checkboxTableThead: defaultTableThead, // 默认表头值
      tableKey: 1, // 为了保证table 每次都会重渲
      loading: true, // 列表页面加载
      status: [
        { name: "已过期", id: -1 },
        { name: "已开启", id: 1 },
        { name: "进行中", id: 3 },
        { name: "已关闭", id: 2 },
      ],
      searchForm: {
        mer_name: "", // 抽奖活动名称
        product_name: "", //生效区域
        mer_order_no: "", //用户群组
        refund_order_no: "", // 状态状态：-1过期 1开启 2进行中 3关闭
        status: "",
        create_time_start: "",
        create_time_end: "",
        time: [],
        page: 1,
        count: 10,
      },
      dataList: [],
      total: 0,
      ifShowDetail: false, //是否打开详情抽屉
      ifshowsearch: false,
    };
  },
  created() {
    this.getListWay();
  },
  methods: {
    //重置
    resetForm(formName) {
      this.searchForm = {
        mer_name: "", // 抽奖活动名称
        product_name: "", //生效区域
        mer_order_no: "", //用户群组
        refund_order_no: "", // 状态状态：-1过期 1开启 2进行中 3关闭
        status: "",
        create_time_start: "",
        create_time_end: "",
        time: [],
        page: 1,
        count: 10,
      };
      // this.$refs[formName].resetFields();
      this.getListWay();
    },
    viewDetail(row) {
      this.id = row.id;
      this.detailTitle = "售后订单详情";
      this.ifShowDetail = true;
    },
    //打开抽屉
    addDetail(title) {
      this.detailTitle = title;
      this.ifShowDetail = true;
    },
    //关闭抽屉
    closedetail() {
      this.ifShowDetail = false;
      this.getListWay();
    },
    getListWay() {
      this.loading = true;
      getRefundOrderList(this.searchForm).then((res) => {
        this.loading = false;
        if (res.code !== 200 || res.status !== 1) {
          this.loading = false;
          return this.$messages.error(res.msg);
        }
        this.dataList = res.data.list;
        this.total = 1;
      });
    },
    resetting() {
      this.searchForm = {
        award_name: "", // 抽奖活动名称
        status: "", // 状态状态：-1过期 1开启 2进行中 3关闭
        page: 1,
        count: 10,
      };
      this.getListWay();
    },

    check(type, id) {
      if (type == 1) {
        this.$prompt("请填写驳回原因", "审核驳回", {
          inputValidator: (value) => {
            if (!value) {
              return "请填写驳回原因";
            }
          },
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        })
          .then(({ value }) => {
            var obj = {
              id: id,
              status: 3,
              admin_remark: value ? value : "",
            };
            this.loading = true;
            auditingRefundOrderAudit(obj).then((res) => {
              if (res.code !== 200 || res.status !== 1) {
                this.loading = false;
                this.$messages.error(res.msg);
                return;
              }
              this.$messages.success(res.msg);
              this.getListWay();
            });
          })
          .catch(() => {});
      } else {
        this.$prompt("请填写通过原因", "审核通过", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        })
          .then(({ value }) => {
            var obj = {
              id: id,
              status: 2,
              admin_remark: value ? value : "",
            };
            this.loading = true;
            auditingRefundOrderAudit(obj).then((res) => {
              if (res.code !== 200 || res.status !== 1) {
                this.loading = false;
                this.$messages.error(res.msg);
                return;
              }
              this.$messages.success(res.msg);
              this.getListWay();
            });
          })
          .catch(() => {});
      }
    },
    timeChange(val) {
      if (val.length !== 0) {
        this.searchForm.create_time_start = val[0];
        this.searchForm.create_time_end = val[1];
      } else {
        this.searchForm.create_time_start = "";
        this.searchForm.create_time_end = "";
      }
    },
  },
};
</script>
<style lang="scss">
.search-form-item {
  padding-bottom: 10px;
  padding-right: 20px;

  .el-form-item__label {
    font-size: 12px;
    font-weight: 500;
    // width:96px;
  }

  .el-input {
    width: 180px;
  }
}
</style>
<style lang="scss" scoped>
.marginBottom-10 {
  margin-bottom: 10px;
}

.marginRight-10 {
  margin-right: 10px;
}

.flex {
  display: flex;
}

.flex-between {
  display: flex;
  justify-content: space-between;
}

.flex-end {
  display: flex;
  justify-content: flex-end;
}

.button-box {
  font-size: 14px;
  text-align: right;
  font-size: 12px;

  .inquire-box {
    background: #1890ff;
    color: #ffffff;
  }

  .reset-box {
    background: #eeeeee;
  }
}

.app-container {
  background: #f3f5f7;

  .container-module {
    background: #fff;
    padding: 20px;
    border-radius: 5px;

    .title-module {
      font-size: 18px;
    }

    .search-module {
      padding-top: 20px;
      display: block;
    }

    .table-module {
      .table-top {
        margin-bottom: 20px;
      }

      .table-num {
        margin-left: 5px;
        background: #f0f0f0;
        width: 35px;
        border-radius: 5px;
      }
    }
  }
}
</style>